<template>
	<view class="content">
    <view class="home-drop">
      <image src="/static/image/main.png" mode="scaleToFill" class="home-drop_img"></image>
    </view>
    <view class="home-content"> 
      <view class="home-events_img">
        <image src="https://cdn.uviewui.com/uview/swiper/1.jpg" mode="scaleToFill" class="events-img"></image>
      </view>
      <!-- 新品推荐 -->
      <view>
        <view class="home-num_tips">
          <view class="u-flex">
            <view class="u-flex-1">
              新品推荐
            </view>
          </view>
        </view>
        <scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" style="height: 484rpx;">
          <view class="u-m-t-32 u-m-l-32 u-m-b-32">
            <view class="scroll-product-item_H" v-for="(item,index) in 5" :key="index">
              <view class="scroll-product-img_H" @click="ProductDetail">
                <image src="/static/image/main.png" mode="scaleToFill" class="scroll-img"></image>
                <view class="opaticy">
                  <text class="opaticy_text">热门/预算/售罄/已下架</text>
                </view>
              </view>
              <view class="scroll-product-text_H">
                <view>活动商品软件服务信息技术开发</view>
                <view class="u-flex">
                  <view class="u-flex-1">￥<text class="product-price">98</text>起</view>
                  <view class="scroll-product-img" @click="specificationShow = true">
                    <text class="iconfont icon-gouwuche scroll-product-img__icon"></text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
      <!-- 精品优选 -->
      <view>
        <view class="home-num_tips">
          <view class="u-flex">
            <view class="u-flex-1">
              精品优选
            </view>
            <view class="u-text-right" @click="AllProduct">
              查看全部
            </view>
          </view>
        </view>
        <scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" style="height: 484rpx;">
          <view class="u-m-t-32 u-m-l-32 u-m-b-32">
            <view class="scroll-product-item_H" v-for="(item,index) in 5" :key="index">
              <view class="scroll-product-img_H" @click="ProductDetail">
                <image src="/static/image/main.png" mode="scaleToFill" class="scroll-img"></image>
                <view class="opaticy">
                  <text class="opaticy_text">热门/预算/售罄/已下架</text>
                </view>
              </view>
              <view class="scroll-product-text_H">
                <view>活动商品软件服务信息技术开发</view>
                <view class="u-flex">
                  <view class="u-flex-1">￥<text class="product-price">98</text>起</view>
                  <view class="scroll-product-img" @click="specificationShow = true">
                    <text class="iconfont icon-gouwuche scroll-product-img__icon"></text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
      <view style="height: 100rpx;"></view>  
    </view>
    <Specification
      v-model="specificationShow" 
      mode="center" 
      width="80%" 
      :closeable="true" 
      close-icon-pos="center"
      :mask-close-able="false"
      :list="list">
    </Specification>
  </view>
</template>

<script>
	export default {
		data() {
			return {
        list: [{
        		label: '规格1',
        		active: true,
        	},
        	{
        		label: '规格2',
        		active: false,
        	},
        ],
        specificationShow:false,
			}
		},
		onLoad() {

		},
		methods: {
      scroll: function(e) {
        console.log(e)
        //this.old.scrollTop = e.detail.scrollTop
      },
      AllProduct(){
        uni.navigateTo({
        	url: '/pages/Mall/AllProduct/AllProduct'
        });
      },
      ProductDetail(){
        uni.navigateTo({
        	url: '/pages/Mall/ProductDetail/ProductDetail?Name=活动商品软件服务信息技术开发'
        });
      }
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		/* display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center; */
    .home-img{
      width: 100%;
      height: 100%;
    }
    .events-img{
      width: 100%;
      height: 100%;
      border-radius: 28rpx;
    }
    .home-drop{
      width: 100%;
      height: 920rpx;
      min-height: 920rpx;
      padding: 32rpx;
      .home-drop_img{
        width: 100%;
        height: 100%;
        border-radius: 28rpx;
      }
    }
    .home-content{
      width: 100%;
      
      .home-num_tips{
        padding: 0 32rpx;
        margin-top: 16rpx;
      }
      
      //横向滚动 start
      .scroll-view_H {
        white-space: nowrap;
        width: 100%; 
      }
	  ::-webkit-scrollbar{
	  	display: none;
	  }
      //商品 ---
      .scroll-product-item_H{
        display: inline-block;
        white-space: normal;
        width: 306rpx;
        height: 420rpx;
        border-radius: 28rpx;
        margin-right:32rpx;
        .scroll-product-img_H{
          width: 100%;
          height: 264rpx;
          min-height: 264rpx;
          position: relative;
        }
        .scroll-img{
          width: 100%;
          height: 100%;
          border-top-left-radius: 28rpx;
          border-top-right-radius: 28rpx;
        }
        .scroll-product-text_H{
          height: 159rpx;
          padding: 16rpx 24rpx;
          border-bottom-left-radius: 28rpx;
          border-bottom-right-radius: 28rpx;
          box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.12);
          .product-price{
            font-size: 44rpx;
            padding: 0 10rpx;
          }
          .scroll-product-img{
            width: 56rpx;
            height: 56rpx;
            border-radius: 50rpx;
            background-color: #fed500;
            display: flex;
            align-items: center;
            justify-content: center;
            .scroll-product-img__icon{
              font-size: 36rpx;
            }
          }
        }
      }
      .opaticy{
        width: 100%;
        height: 48rpx;
        line-height: 48rpx;
        background-color: rgba(0,0,0,0.5);
        position: absolute;
        bottom: 0px;
        color: #ffffff;
        padding: 0 24rpx;
        .opaticy_text{
          font-size: 24rpx;
        }
      }
      //商品 ---
      //横向滚动 end
      
      .home-events_img{
        width: 686rpx;
        height: 264rpx;
        border-radius: 28rpx;
        margin: 0 auto;
        padding-bottom: 32rpx;
      }
      .more{
        font-size: 24rpx;
      }
    }
	}
</style>
